import { Button, Col, Form, Row, Select, Space, Table, TableProps, Tag, Image, Switch } from 'antd';
import { Dish, DishParams } from './dish.type';
import { useFetchList } from '../../hooks/useFetchList';
import { DishApi } from '../../apis/Dish';
import { InsertModal } from '../../components/insertModal';
import { useRef } from 'react';

export const DishPage = () => {
  const columns: TableProps<Dish>['columns'] = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: '所属食堂',
      dataIndex: 'canteenName',
      key: 'canteenName',
    },
    {
      title: '所属窗口',
      dataIndex: 'windowName',
      key: 'windowName',
    },
    {
      title: '价格',
      key: 'price',
      dataIndex: 'price',
    },
    {
      title: '图片',
      key: 'id',
      dataIndex: 'imgs',
      render: imgs => (
        // <img src={imgs[0]} alt="" style={{ width: 50, height: 50 }} />
        <Image src={imgs[0]} alt='' style={{ width: 50, height: 50 }} />
      ),
    },
    {
      title: '是否特色',
      key: 'isSpecial',
      dataIndex: 'isSpecial',
      render: isSpecial => {
        return <Switch checked={isSpecial} />;
      },
    },
    {
      title: '是否首页推荐',
      key: 'recommend',
      dataIndex: 'recommend',
      render: recommend => {
        return recommend ? <Tag color='green'>是</Tag> : <Tag color='red'>否</Tag>;
      },
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      key: 'id',
      render: (_, record) => (
        <Space size='middle'>
          <Button type='link'>编辑</Button>
          <Button type='link' danger>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const insertModalRef = useRef(null);

  const { tableData, total, paginationParams, paginationChange, search, form, fetchData, loading } = useFetchList<DishParams, Dish>({
    api: DishApi.getDishPage,
  });

  console.log('组件重新渲染');

  const openModal = () => {
    (insertModalRef.current as any).setIsModalOpen(true);
  };

  return (
    <div>
      <Row>
        <Col span={8}>
          <Space>
            <Button onClick={fetchData}>刷新</Button>
            <Button type='primary' onClick={openModal}>
              新增
            </Button>
            <Button danger>删除</Button>
          </Space>
        </Col>
        <Col span={16} style={{ justifyContent: 'flex-end', display: 'flex' }}>
          <Space style={{ justifyContent: 'flex-end' }}>
            <Form layout='inline' form={form}>
              {/* <Form.Item label='名称' name='name'>
                <Input placeholder='请输入名称'></Input>
              </Form.Item> */}
              <Form.Item label='是否特色' name='isSpecial'>
                <Select style={{ width: 180 }}>
                  <Select.Option value={1}>是</Select.Option>
                  <Select.Option value={0}>否</Select.Option>
                </Select>
              </Form.Item>
              {/* <Form.Item label='所属食堂' name='canteenId'>
                <Select style={{ width: 180 }}>
                  <Select.Option value={1}>是</Select.Option>
                  <Select.Option value={0}>否</Select.Option>
                </Select>
              </Form.Item> */}
            </Form>
            <Button type='primary' onClick={search}>
              查询
            </Button>
          </Space>
        </Col>
      </Row>
      <Table<Dish>
        loading={loading}
        columns={columns}
        dataSource={tableData}
        pagination={{ total, pageSize: paginationParams.size, current: paginationParams.page }}
        onChange={paginationChange}
        rowKey={record => record.id}
        style={{ marginTop: 20 }}
      />
      {/*

      ref 是一个特殊的属性，不能用作父组件传值
      而是用作父组件获取子组件的方法的桥梁
      注意：在react18中 不能直接通过ref获取子组件的方法，需要组件做forwardRef来处理

      当我的子组件是forwardRef组件时，我可以通过ref.current来获取子组件的方法，那么子组件获得第二个参数ref
      */}
      <InsertModal ref={insertModalRef} />
    </div>
  );
};
